<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sp" uri="/web-simple-page"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<link rel="stylesheet" type="text/css" href="${ctxPath}/script/jquery/plugins/jquery-easyui-1.3.2/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/script/jquery/plugins/jquery-easyui-1.3.2/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/style/web-default.css">
	<script type="text/javascript" src="${ctxPath}/script/jquery/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="${ctxPath}/script/jquery/plugins/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctxPath}/script/jquery/plugins/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="${ctxPath}/script/common/extension/date-extension.js"></script>
	<script type="text/javascript" src="${ctxPath}/script/common/data-formater-util.js"></script>
	<script type="text/javascript" src="${ctxPath}/script/common/page-util.js"></script>
	<script type="text/javascript" src="${ctxPath}/script/common/subpage-init.js"></script>
	<title>主页</title>
</head>
<body style="width:100%">
<script type="text/javascript">
<!--
$(function(){
	$(window).resize(function(){
		//窗口变化时，自动调整Dialog大小（针对最大化的Dialog）
		$(".easyui-dialog").panel('resize', {});
	});
// 	$('body').click(function(){
// 		$(".easyui-panel").panel('resize', {});
// 		$(".easyui-datagrid").datagrid('resize', {});
// 		$.parser.parse('body');
// 	});
});
// $(function(){
// 	top$($('#sp_edit_dialog')).dialog({  
// // 	    title: 'My Dialog',  
// 	    width: 400,  
// 	    height: 200,  
// 	    closed: false,  
// 	    cache: false,  
// // 	    href: 'get_content.php',  
// 	    modal: true  
// 	}); 
// });
function submitCheckedRows(url, columns){
	var valueArr = [];
	var fieldArr = [];//dataGrid中的属性名
	var paramArr = [];//提交时对应的参数名，元素数量与fieldArr相同
	if(columns != 'null' && columns.length > 0){
		var tmpArr = columns.split(',');
		for(var i=0; i<tmpArr.length; i++){
			var subTmpArr = tmpArr[i].split(":");
			if(subTmpArr.length == 1){
				fieldArr.push(subTmpArr[0]);
				paramArr.push(subTmpArr[0]);
			}else if(subTmpArr.length == 2){
				fieldArr.push(subTmpArr[0]);
				paramArr.push(subTmpArr[1]);
			}else{
				alert('Parameter Error.');
				return;
			}
		}
	}
	
	var checkedRows = $('#sp_grid').datagrid('getChecked');
	if(checkedRows.length == 0){
		alert('提示：您未选择任何记录。');
		return;
	}
	$.each(checkedRows, function(index, rowData){
		for(var i=0; i<fieldArr.length; i++){
			valueArr.push(paramArr[i] +'='+ rowData[fieldArr[i]]);
		}
	});
	
	$.post(url, valueArr.join("&"), function(returnJson){
		alert(returnJson.success);
		$('#sp_grid').datagrid('reload');
	}, 'json');
}
//-->
</script>

<sp:simplePage id="sp">
	<sp:queryPanel url="${ctxPath }/user/data.do">
			<table class="queryTable">
				<tr>
					<th>登录名：</th>
					<td><input name="LOGIN_NAME" type="text" value=""/></td>
					<th>用户名：</th>
					<td><input name="REAL_NAME" type="text" value=""/></td>
				</tr>
				<tr>
					<th>密码：</th>
					<td><input name="PASSWORD" type="text" value=""/></td>
					<th>邮箱：</th>
					<td><input name="EMAIL" type="text"/></td>
				</tr>
			</table>
	</sp:queryPanel>
	<sp:editDialog addButton="Insert one" addTitle="Insert a new record" editButton="Edit this" editTitle="Edit this record.">
			<table class="propTable">
				<tr>
					<th>登录名：</th>
					<td><input name="LOGIN_NAME" type="text" value=""/></td>
					<th>用户名：</th>
					<td><input name="LOGIN_NAME" type="text" value=""/></td>
				</tr>
				<tr>
					<th>密码：</th>
					<td><input name="PASSWORD" type="text" value=""/></td>
					<th>邮箱：</th>
					<td><input name="EMAIL" type="text"/></td>
				</tr>
			</table>
	</sp:editDialog>
	<sp:buttons>
		<sp:buttonSubmitChecked url="delete.do" label="批量删除" submitColumns="USER_ID:id,LOGIN_NAME,REAL_NAME" icon="icon-remove"/>
    	<sp:button onclick="removeRecord()" label="删除记录" icon="icon-remove"></sp:button>
    	<sp:button onclick="saveRecord()" label="保存" icon="icon-save"></sp:button>	
	</sp:buttons>
	
	<sp:dataGrid title="用户列表">
		<sp:rows frozen="false" >
			<sp:columnCheckbox/>
	    	<sp:column field="STATUS" label="xxx" width="100"></sp:column>
	    	<sp:column field="LOGIN_NAME" label="登录名" width="100"></sp:column>
	    	<sp:column field="x" label="操作" width="150" align="center">
	    	<div onclick="alert(8899)">
	    		<a href="${ctxPath}/user/del.do?id=#USER_ID#&email=#EMAIL#">查看</a>
	    		<a href="javascript:void(0);" onclick="modify_record(this,event)">修改</a>
	    	</div>
	    	</sp:column>
	    	<sp:column field="PASSWORD" label="密码" width="250"> </sp:column>
	    	<sp:column field="REAL_NAME" label="用户名称" width="250"> </sp:column>
	    	<sp:column field="EMAIL" label="电子邮箱" width="250"></sp:column>
	    	<sp:column field="CREATE_TIME" label="创建时间" width="200" pattern="date,yyyy-MM-dd hh:mm:ss" align="center"></sp:column>
		</sp:rows>
	</sp:dataGrid>
</sp:simplePage>
<script type="text/javascript">
<!--
function modify_record(a,e){
// 	e.preventDefault();
	e.stopPropagation();
	var index = $(a).closest('tr').attr('id').split('-')[4];
// 	var row = $(a).closest('.easyui-datagrid').datagrid('getRows');
	var row = $('#sp_grid').datagrid('getRows')[index];
    if (row){ 
        $('#sp_edit_dialog').dialog('open').dialog('setTitle','Edit this record.');
  		$('#sp_edit_dialog').dialog('resize',{});
        $('#sp_edit_dialog').find('form').form('load',row);
        $('#sp_edit_dialog').data('url', 'null');
      } else {
        alert('请选择要修改的记录。')
      }
}
//-->
</script>
</body>
</html>